<template>
  <input type="text" placeholder="组件A" />
</template>

<script lang="ts" setup>
// 使用 keep-alive 的组件会多出两个生命周期 onActivated onDeactivated，少了 onBeforeUnmount onUnmounted ,onMounted只会执行一次
import {
  onBeforeMount,
  onMounted,
  onBeforeUpdate,
  onUpdated,
  onBeforeUnmount,
  onUnmounted,
  onActivated,
  onDeactivated
} from 'vue';
onBeforeMount(() => {
  console.log('挂载前');
});
onMounted(() => {
  console.log('挂载成');
});
onBeforeUpdate(() => {
  console.log('更新前');
});
onUpdated(() => {
  console.log('更新时');
});
onBeforeUnmount(() => {
  console.log('卸载前');
});
onUnmounted(() => {
  console.log('卸载时');
});
onActivated(() => {
  console.log('keep-alive初始化');
});
onDeactivated(() => {
  console.log('keep-alive卸载');
});
defineOptions({
  name: 'A'
});
</script>
